<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5新增属性</title>
 <style>
	body{ font-size:40px; }
	#dragBox{ width:400px; height:100px; border:1px #000 solid; }
	#dragProgress{ display:none; }
	#dragSuccess{ display:none; }
	#progressBar{ width:300px; height:50px; background:gray; }
	#progressUpBar{ width:0%; height:100%; background:blue; }
</style>
</head>
<body><br>
<div id="dragBox">请拖拽到此区域！！！</div>
<div id="dragProgress">
	<div id="progressBar">
    	<div id="progressUpBar"></div>
	 </div>
	 <div id="progressValue">0/s</div>
	 <div id="progressTime">00:00:00</div>
</div>
<div id="dragSuccess"></div>
</body>
<script>
	var oDragBox = document.getElementById('dragBox');
	var oDragProgress = document.getElementById('dragProgress');
	var oDragSuccess = document.getElementById('dragSuccess');
	var oProgressBar = document.getElementById('progressBar');
	var oProgressUpBar = document.getElementById('progressUpBar');
	var oProgressValue = document.getElementById('progressValue');
	var oProgressTime = document.getElementById('progressTime');
	oDragBox.ondragenter = function(){
		this.innerHTML = '可以释放啦！！！！';
	};
	oDragBox.ondragover = function(ev){
		ev.preventDefault();
	};
	oDragBox.ondragleave = function(){
		this.innerHTML = '请拖拽到此区域！！！';
	};
	oDragBox.ondrop = function(ev){
		oDragProgress.style.display = 'block';
		oDragSuccess.style.display = 'none';	
	var fs = ev.dataTransfer.files[0];
		var fd = new FormData();
		var startTime = now();
	var startValue = 0;
		fd.append('fileName',fs);
		var xhr = new XMLHttpRequest();
		xhr.open('POST','file2.php',true);
		xhr.responseType = 'json';
		xhr.onload = function(){
			if(xhr.status == 200){
			var data = xhr.response;
				oDragProgress.style.display = 'none';
				oDragSuccess.style.display = 'block';
	       oDragSuccess.innerHTML = data.name + ' <a href="#">删除</a>';
		}
	};
 	xhr.upload.onprogress = function(ev){
			var loaded = ev.loaded;
		var total = ev.total;
			var changeTime = now();
			if(changeTime - startTime > 1000){
			startTime = changeTime;
			var changeValue = loaded - startValue;
				var surplusValue = total - loaded;
			startValue = loaded;
	 oProgressValue.innerHTML = formatValue(changeValue,'K');
	 oProgressTime.innerHTML = formatTime(surplusValue / changeValue);
			}
 			oProgressUpBar.style.width = loaded / total * 100 + '%';
		};
		xhr.send(fd);
		ev.preventDefault();
	};
	function formatValue(v,t){	
	v = v / 1024;
		if(v > 1024){
		return formatValue(v , 'M');
	}
	else{
		return v.toFixed(2) + t + '/s';
		}
	}
	function formatTime(t){	
		var iH = Math.floor(t/3600);
		var iM = Math.floor(t%3600/60);
		var iS = Math.floor(t%60);
 		return toZero(iH) + ":" + toZero(iM) + ":" + toZero(iS);
	}
	function toZero(n){
		if(n<10){
			return '0' + n;
		}
		else{
		return '' + n;
		}
	}
	function now(){
		return (new Date()).getTime();
 	}
</script>

</html>
